import "./App.css";
import counterStore from "./counterStore";
import { observer } from "mobx-react-lite";
import { useStore, rootStore } from "./store/index";

/**
 * mobx使用步骤
 * 1. 创建一个文件 store.js ,用于定义Store,并导出以供其他模块使用。
 * 2. 在上面创建的文件中定义一个Store类， 并在构造函数中添加 makeAutoObservable(this) 方法调用
 *   | 在 storeClass 中 定义属性，并设置修改属性方法。
 *   | 实例化Store对象并导出。
 * 3. 在APP组件中引入Store， 并引用对应的属性和调用方法。
 * 4. APP 组件导出时 ，用observer(APP)包裹。
 *
 * 1. 定义数据状态state
2. 在构造器中实现数据响应式处理 makeAutoObservble
3. 定义修改数据的函数action
4. 实例化store并导出
 */
function App() {
  const store = useStore();

  console.log("store测试", counterStore === store.counterStore);
  console.log("store2测试", rootStore.counterStore === store.counterStore);

  // console.log("pureMobxStore", counterStore);
  // console.log("useContextStore", store);

  return (
    <div className="App">
      <button onClick={() => counterStore.addCount()}>
        click me!{counterStore.count}{" "}
      </button>
    </div>
  );
}

export default observer(App);
